<template>
  <div class="app-container">
    <!-- 搜索 -->
    <statistical-search
      :init-params="initParams"
      :search-params="searchKey"
      :department-all-list-data="departmentAllListData"
      @on-init="handleInitList"></statistical-search>
    <!-- 图表 -->
    <statistical-chart
      :chart-data="chartData"></statistical-chart>
  </div>
</template>

<script>
  import { formatTimestamp } from '@/utils/utils'
  import { getSalaryStatisticalAPI } from '@/api/todo/statistical'
  import { StatisticalSearch, StatisticalChart } from './components'
  import commonMixins from '@/mixins/common'
  import treeAllListData from '@/mixins/treeAllListData'

  export default {
    name: 'StatisticalList',
    mixins: [commonMixins, treeAllListData],
    components: {
      StatisticalSearch,
      StatisticalChart
    },
    data() {
      return {
        initParams: { // 初始化参数
          beginTime: '', // 发放开始月份
          endTime: '', // 发放开始月份
          deptIds: [] // 部门
        },
        searchKey: {}, // 搜索参数
        totalCount: 0, // 分页用的列表总条数
        listLoading: false,
        chartData: {} // 列表数据
      }
    },
    props: {},
    computed: {},
    methods: {
      handleInitList(params = {}) { // 初始化列表
        this.searchKey = {
          ...this.searchKey,
          ...params
        }
        this.getListData()
      },
      formatResultData(resultData = []) { //
        let formatData = {
          salaryDateData: [],
          normalData: [],
          reissueData: [],
          sumSalaryData: []
        }
        resultData.forEach((item, index) => {
          formatData.salaryDateData.push(item.salaryDate)
          formatData.normalData.push(item.normal)
          formatData.reissueData.push(item.reissue)
          formatData.sumSalaryData.push(item.sumSalary)
        })
        return formatData
      },
      validateTime() {
        let { beginTime, endTime } = this.searchKey
        if (formatTimestamp(beginTime) > formatTimestamp(endTime)) {
          this.$notify.error({
            title: '错误',
            message: '请选择有效的发放月份范围!'
          })
          return false
        } else {
          return true
        }
      },
      async getListData() { // 获取列表数据
        try {
          if (this.validateTime()) {
            let { searchKey } = this
            this.listLoading = true
            let response = await getSalaryStatisticalAPI({
              ...searchKey,
              ...{
                deptIds: this.searchKey.deptIds.join(',')
              }
            })
            let result = response.data
            this.chartData = this.formatResultData(result)
            /* if (+result.code === 200) {
            } else {
              this.$notify.error({
                title: '错误',
                message: result.msg || '获取列表失败！'
              })
            } */
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '获取列表失败!'
          })
        } finally {
          this.listLoading = false
        }
      },
      async initData() { // 初始化数据
        this.getListData()
        this.getDepartmentAllListData()
      }
    },
    watch: {
      initParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {
    },
    mounted() {
      this.initData()
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    &-left {
      width: 255px;
      float: left;
    }

    &-right {
      margin-left: 260px;
    }
  }
</style>
